<template>
  <div class="newpeople">
    <!-- 人员设置 form -->
    <el-row :gutter="24" class="form" id="formt" style="background:#fff; position: relative;">
      <el-col :span="7">
        <div class="grid-content">
          <el-form :model="searchForm" label-width="95px" @submit.native.prevent class="demo-form">
            <el-form-item label="用 户 名" class="img-name">
              <el-input
                v-model="searchForm.loginName"
                placeholder="请选择用户名称"
                style="width: 200px;"
                clearable
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
      <el-col :span="7">
        <div class="grid-content">
          <el-form :model="searchForm" label-width="95px" @submit.native.prevent class="demo-form">
            <el-form-item label="角色权限" class="img-name">
              <el-select
                v-model="searchForm.roleName"
                placeholder="请选择角色权限"
                style="width: 200px;"
                clearable
              >
                <el-option
                  :label="item.name"
                  :value="item.name"
                  v-for="(item, index) in roleEnum"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
      <el-col :span="7">
        <div class="grid-content date-picker">
          <el-form :model="searchForm" label-width="95px" @submit.native.prevent class="demo-form">
            <el-form-item label="删除时间" class="img-name">
              <el-date-picker
                placeholder="请选择删除时间"
                style="margin-left:40px; width: 200px"
                v-model="searchForm.deleteTime"
                type="date"
              ></el-date-picker>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
      <el-col :span="3" class="btn-cx">
        <div class="grid-content">
          <el-form
            :model="searchForm"
            label-width="100px"
            @submit.native.prevent
            style="float: right"
          >
            <el-button type="primary" @click="search" class="search-btn">查询</el-button>
          </el-form>
        </div>
      </el-col>
    </el-row>
    <!-- 人员列表 -->
    <div class="poeple-list">
      <el-table
        :data="listData"
        stripe
        class="reg-tab"
        :header-cell-style="getRowClass"
        v-loading="loading"
      >
        <el-table-column
          :prop="item.prop"
          :label="item.label"
          v-for="(item, index) in tableHead"
          :key="index"
        ></el-table-column>
        <!-- <el-table-column :prop="item.prop" :label="item.label" v-for="(item, index) in tableHead" :key="index"
        :formatter="item.prop === 'roleCode' ? roleFormatter : null"></el-table-column>-->
      </el-table>

      <div class="pagination">
        <div class="page-left">
          <span>共{{ this.total}}条数据</span>
          <span>每页:</span>
          <el-input
            placeholder="条数"
            v-model="inputs"
            @blur="pagesizeChange"
            @keyup.enter.native="pagesizeChange"
            clearable
          ></el-input>
          <span>条</span>
        </div>
        <el-pagination
          background
          layout="prev, pager, next, jumper"
          :page-size="pageSize"
          :total="total"
          @current-change="handleCurrentChanges"
          id="page"
          :current-page.sync="currentPage"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  import Config from '../../../config'
  import { mapGetters } from 'vuex'
  import moment from 'moment'

  export default {
    name: 'Peoplelist',
    data() {
      return {
        tableHead: [
          {prop: 'index', label: '序号'},
          {prop: 'loginName', label: '用户名'},
          {prop: 'name', label: '姓名'},
          {prop: 'phone', label: '电话号码'},
          {prop: 'roleName', label: '角色权限'},
          {prop: 'area', label: '管辖区域'},
          {prop: 'deleteTime', label: '删除时间'}
        ],
        // 表格数据
        listData: [],
        // 查询
        searchForm: {
          loginName: '',
          roleName: '',
          deleteTime: null
        },
        roleEnum: [],
        // 分页
        total: 1,
        currentPage: 1,
        pageSize: 15,
        inputs:15,
        // loading
        loading: false
      }
    },
    computed: {
      ...mapGetters('user', {
        role: 'getRole',
        button: 'getButton',
        district: 'getDistrict',
        user: "getUser"
      })
    },
    mounted() {
      // this.getPeople()
      this.delectlist()
      this.getAllRoleType()
    },
    methods: {
      /**
       * 获取所有的角色列表
       * */
      getAllRoleType () {
        const url = `${Config.AUTH_URL}/role/getAll`
        this.$http.get(url)
          .then(data => {
            this.roleEnum.splice(0)
            data.forEach(item => {
              this.roleEnum.push(item)
            })
          })
      },
      /**
       * 当前页变化
       * */
      handleCurrentChanges(val) {
        this.currentPage = val
        this.getPeople();
      },
      /**
       * 每页大小变化
       * */
      pagesizeChange () {
        if (+this.inputs === 0) {
          this.inputs = 15
        }
        if (Number.isInteger(+this.inputs)) {
          this.pageSize = +this.inputs
          this.getPeople()
        } else {
          this.$message({
            message: '请输入整数',
            type: 'warning'
          })
        }
      },
      /**
       * 从后台获取人员列表
       * */
      getPeople () {
        const url = `${Config.AUTH_URL}/userDeleteLog/getByPageList`
        let param = {
          offset: this.currentPage - 1,
          pagesize: this.pageSize,
          systemId:'7',
          tenantId:'0',
          loginName: this.searchForm.loginName ? this.searchForm.loginName : undefined,
          roleName: this.searchForm.roleName ? this.searchForm.roleName : undefined,
          deleteTime: this.searchForm.deleteTime ? moment( this.searchForm.deleteTime).format("YYYY-MM-DD") : undefined
        }
        this.$http.get(url, param).then(data => {
          const list = data.pageList
          this.listData.splice(0)
          list.forEach((item, i) => {
            if (this.currentPage === 1) {
              item.index = i + 1;
            } else {
             item.index = (this.currentPage - 1) * this.pageSize + i + 1;
            }
            this.listData.push(item)
          })
          this.total = data.totalCount
        })
      },
      // 删除限制数量
      delectlist() {
        axios({
          method: "get",
          url: `${Config.AUTH_URL}/userDeleteLog/getDeleteCountByUserId?date=${this.$util.Date.getNowDate()}`,
          headers: {
            token: sessionStorage.getItem('token')
          }
        }).then(res => {
          console.log(res)
          if (res.data.data <= 20) {
            this.getPeople();
          } else{
            this.getPeople();
            this.$message({message:`主运营管理员：子运营公司管理员(${this.user.loginName})删除了超过20个人员，请尽快联系对方！`,type:'error'})
         
        }
        }).catch( error => {})
      },
      
      /**
       * 表头添加背景颜色
       * */
      getRowClass({ row, column, rowIndex, columnIndex }) {
        if (rowIndex === 0) {
          return 'background:#fafbfc'
        } else {
          return ''
        }
      },
      /**
       * 根据条件搜索搜索
       * */
      search() {
        this.currentPage = 1
        this.getPeople()
      }
    }
  }
</script>

<!-- Add 'scoped' attribute to limit CSS to this component only -->
<style lang='scss' scoped>
@import "../../../../static/scss/common";
.newpeople {
  .el-input.is-disabled .el-input__inner {
    color: #606266;
    border: 0;
    background-color: #fff;
  }
  .el-row {
    padding: 0;
    .el-col {
      padding: 0 !important;
    }
  }
  .el-form {
    height: 110px;
    display: flex;
    align-items: center;
  }
  .el-form-item.img-name {
    font-family: "微软雅黑";
    font-size: 12px !important;
    font-weight: bold;
    color: #444;
    position: relative;
  }
  .el-form-item__label {
    font-size: 12px !important;
    padding: 0;
    text-align: left;
    text-indent: 51px;
  }
  .img-name /deep/ .el-form-item__label:before {
    position: absolute;
    display: block;
    left: 24px;
    top: 13px;
    content: " ";
    width: 15px;
    height: 20px;
    background: url("../../../../static/image/common/left.png") no-repeat;
  }
  .img-name /deep/ .el-form-item__label:after {
    position: absolute;
    display: block;
    left: 104px;
    top: 13px;
    content: " ";
    width: 20px;
    height: 20px;
    background: url("../../../../static/image/common/right.png") no-repeat;
  }
  .date-picker /deep/ .el-input--prefix .el-input__inner {
    padding-left: 30px;
  }
  .el-form-item.img-name {
    margin: 10px 0 10px 0;
  }
  .form .el-input__inner {
    height: 28px !important;
    line-height: 28px !important;
    border: 1px solid #e4e4e4;
    padding: 0 0 0 10px !important;
    .el-icon-time {
      line-height: 0;
    }
    .el-range-separator {
      line-height: 25px;
    }
  }
  .form.el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .poeple-list {
    width: 100%;
    height: auto;
    background: $white;
    margin-top: 20px;
    .add-user {
      height: 24px;
      line-height: 24px;
      margin-right: 27px;
      text-align: right;
      padding-top: 16px;
    }
    .pagination {
      padding: 32px 0 44px 23px;
      .page-left {
        font-size: 12px;
        display: inline-block;
        .el-input--suffix {
          width: 56px;
        }
      }
    }
  }
}
</style>
